import React, { useState } from 'react';
import { Button, Dropdown, Space } from 'antd';
import { 
  PlusOutlined,
  MessageOutlined,
  QuestionCircleOutlined,
  ShareAltOutlined,
  ShoppingOutlined,
} from '@ant-design/icons';
import PostEditor from '../PostEditor/PostEditor';
import type { CreatePostParams } from '../../types';
import './PublishModal.scss';

const PublishModal: React.FC = () => {
  const [open, setOpen] = useState(false);
  const [category, setCategory] = useState<'discussion' | 'help' | 'share' | 'trade'>('discussion');

  // 处理发布按钮点击
  const handlePublish = (type: 'discussion' | 'help' | 'share' | 'trade') => {
    setCategory(type);
    setOpen(true);
  };

  // 处理提交
  const handleSubmit = async (values: CreatePostParams) => {
    console.log('提交帖子:', values);
    // TODO: 调用API提交
    // await createPost(values);
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));
  };

  // 处理取消
  const handleCancel = () => {
    setOpen(false);
  };

  // 下拉菜单项
  const menuItems = [
    {
      key: 'discussion',
      label: '发起讨论',
      icon: <MessageOutlined />,
      onClick: () => handlePublish('discussion'),
    },
    {
      key: 'help',
      label: '发布求助',
      icon: <QuestionCircleOutlined />,
      onClick: () => handlePublish('help'),
    },
    {
      key: 'share',
      label: '分享内容',
      icon: <ShareAltOutlined />,
      onClick: () => handlePublish('share'),
    },
    {
      key: 'trade',
      label: '发布商品',
      icon: <ShoppingOutlined />,
      onClick: () => handlePublish('trade'),
    },
  ];

  return (
    <>
      <Dropdown
        menu={{ items: menuItems }}
        placement="bottomLeft"
        trigger={['click']}
      >
        <Button type="primary" icon={<PlusOutlined />}>
          发布
        </Button>
      </Dropdown>

      <PostEditor
        open={open}
        category={category}
        onSubmit={handleSubmit}
        onCancel={handleCancel}
      />
    </>
  );
};

export default PublishModal;

